<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>accordion demo </title>
<link type="text/css" rel="stylesheet"  href="../highlight/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
</head>
<body>
    <div class="wrapper">
        <h1>嵌套的accordion</h1>
        <p class="example"></p>
        <p><span class="use-description">说明：</span>需要嵌套accordion时，在配置数据的content中设置绑定accordion的元素，并绑定accordion，具体使用方式请看demo</p>
        <div ms-skip>
            <pre class="brush: js; html-script: true; gutter: false; toolbar: false">
                &lt;!DOCTYPE HTML&gt;
                &lt;html&gt;
                &lt;head&gt;
                    &lt;meta charset='utf-8'/&gt;
                    &lt;title&gt;最基本的dialog组件&lt;/title&gt;
                    &lt;script src='avalon.js'&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;div class="demo-show" ms-controller="demo"&gt;
                        &lt;div ms-widget="accordion,aa,$aaOpts"&gt;
                        &lt;/div&gt;
                        &lt;script&gt; 
                            require(["accordion/avalon.accordion"], function($$) {
                                $$.define('demo',function(vm){
                                    vm.$aaOpts = {
                                        data: [{
                                            'title': '标题1',
                                            'content': '正文1&lt;p&gt;fasdfsdaf&lt;/p&gt;'
                                        }, {
                                            'title': '标题2',
                                            'content': '正文2&lt;div ms-widget="accordion,bb,$bbOpts" id="test"&gt;&lt;/div&gt;'
                                        }],
                                        width: "600"
                                    }
                                    vm.$bbOpts = {
                                        data:  [
                                            {
                                                title: "雪儿",
                                                content: 'heelfifsfsd&lt;div ms-widget="accordion,cc,$ccOpts" id="test"&gt;&lt;/div&gt;'
                                            },
                                            {
                                                title: "静儿",
                                                content: '很好，我喜欢，继续额'
                                            }
                                        ],
                                        multiple: true
                                    }
                                    vm.$ccOpts = {
                                        data: [
                                            {
                                                title: "三层嵌套标题一",
                                                content: "三层嵌套内容一"
                                            },
                                            {
                                                title: "三层嵌套标题二",
                                                content: "三层嵌套内容二"
                                            },
                                            {
                                                title: "三层嵌套标题三",
                                                content: "三层嵌套内容三"
                                            }
                                        ],
                                        mode: "nav"
                                    }
                                });
                                $$.scan();
                            });
                        &lt;/script&gt;
                    &lt;/div&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            </pre>
        </div>
        <div class="demo-show" ms-controller="demo">
            <div ms-widget="accordion,aa,$aaOpts">
            </div>
            <script> 
                require(["accordion/avalon.accordion"], function($$) {
                    $$.define('demo',function(vm){
                        vm.$aaOpts = {
                            data: [{
                                'title': '标题1',
                                'content': '正文1<p>fasdfsdaf</p>'
                            }, {
                                'title': '标题2',
                                'content': '正文2<div ms-widget="accordion,bb,$bbOpts" id="test"></div>'
                            }],
                            width: "600"
                        }
                        vm.$bbOpts = {
                            data:  [
                                {
                                    title: "雪儿",
                                    content: 'heelfifsfsd<div ms-widget="accordion,cc,$ccOpts" id="test"></div>'
                                },
                                {
                                    title: "静儿",
                                    content: '很好，我喜欢，继续额'
                                }
                            ],
                            multiple: true
                        }
                        vm.$ccOpts = {
                            data: [
                                {
                                    title: "三层嵌套标题一",
                                    content: "三层嵌套内容一"
                                },
                                {
                                    title: "三层嵌套标题二",
                                    content: "三层嵌套内容二"
                                },
                                {
                                    title: "三层嵌套标题三",
                                    content: "三层嵌套内容三"
                                }
                            ],
                            mode: "nav"
                        }
                    });
                    $$.scan();
                });
            </script>
        </div>
    </div>
</body>
</html>

